<template>
  <div>
    <div class="header">
      <el-breadcrumb separator="/" style=" margin: 0 auto; font-size: 20px;padding-top: 1%;width: 1300px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">监测首页</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-row :gutter="20">
<!--      显示数据更新提示-->
      <el-alert
        :title="time"
        type="info"
        center
        show-icon
        class="">
      </el-alert>
	  <!-- 土壤情况 -->
      <el-col :span="6"><div class="grid-content bg-purple" style="background: burlywood">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-help"></i></el-col>
          <el-col :span="10" >土壤温度:</el-col>
          <el-col :span="4" >{{data.rtSoilTemperature}}°C</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: #8686BC">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-s-help"></i></el-col>
          <el-col :span="10">土壤湿度:</el-col>
          <el-col :span="4">{{data.rtSoilMoisture}}%</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: darkorange">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-orange"></i></el-col>
          <el-col :span="10">电导率:</el-col>
          <el-col :span="6">{{data.rtConductivity}}ms/cm</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: darkseagreen">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-guide"></i></el-col>
          <el-col :span="10">土壤PH</el-col>
          <el-col :span="4">{{data.rtSoilPh}}PH</el-col>
        </el-row>
      </div></el-col>
    </el-row>
    <el-row :gutter="20" >
      <el-col :span="6"><div class="grid-content bg-purple" style="background: darkturquoise">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-discover"></i></el-col>
          <el-col :span="10">风 向: </el-col>
          <el-col :span="4">{{data.rtWindDirection}}°</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: #99a9bf">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-stopwatch"></i></el-col>
          <el-col :span="10">风 速: </el-col>
          <el-col :span="4">{{data.rtWindSpeed}}m/s</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: darkviolet">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-partly-cloudy"></i></el-col>
          <el-col :span="10">大气温度:</el-col>
          <el-col :span="4">{{data.rtAtmosphericTemperature}}°C</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: slategrey">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-cloudy-and-sunny"></i></el-col>
          <el-col :span="10">大气湿度:</el-col>
          <el-col :span="4">{{data.rtAtmosphericHumidity}}%</el-col>
        </el-row>
      </div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><div class="grid-content bg-purple" style="background: tomato">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-wind-power"></i></el-col>
          <el-col :span="9">降雨量:</el-col>
          <el-col :span="7">{{data.rtRainfall}}毫米/分</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: darkseagreen">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-dish-1"></i></el-col>
          <el-col :span="10">大气压力:</el-col>
          <el-col :span="6">{{data.rtAtmosphericPressure}}Kpa</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: burlywood">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-price-tag"></i></el-col>
          <el-col :span="8">PM2.5:</el-col>
          <el-col :span="6">{{data.rtPm2}}ug/m³</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: #99a9bf">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-discount"></i></el-col>
          <el-col :span="8">PM10:</el-col>
          <el-col :span="6">{{data.rtPm10}}ug/m³</el-col>
        </el-row>
      </div></el-col>
      <el-col :span="6"><div class="grid-content bg-purple" style="background: mediumorchid">
        <div style="height: 30px"></div>
        <el-row :gutter="20">
          <el-col :span="4"><i class="el-icon-news"></i></el-col>
          <el-col :span="8">蒸发量:</el-col>
          <el-col :span="8">{{data.rtEvaporationCapacity}}mm/分</el-col>
        </el-row>
      </div></el-col>
	</el-row>
    <router-view/>
  </div>
</template>

<script>
  import axios from 'axios'
 
  export default {
        name: "monitor.vue",
        data(){
          return{
            time: "",
			data: [],
          }
        },

        methods:{
          getCurrentTime() {
            //获取当前时间并打印
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth()+1;
            let dd = new Date().getDate();
            let hh = new Date().getHours();
            let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
            let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
            _this.time = "数据更新时间 " + yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
			this.getData(mf);
            console.log(_this.time)
			
          },
		  getData(param){
			  // 从后端获取数据
			  // alert(param)
			  axios.get(`/api/param/rtime?rtMinute=${param}`)
			  .then((data)=>{
				console.log(data.data)
				if(data.data.code==10000){
					this.data = data.data.data
				}
			  })
			  .catch((e)=>{
				  
			  })
		  }
        },
        created(){
          // 页面加载的时调的函数
          this.getCurrentTime()
        },

    }
</script>

<style scoped>
  .header {
    background-color: #E5E9F2;
    height: 56px;
    width: 1280px;
    margin-top: -10px;
    margin-left: -35px;
    padding-right: -100px;
    align-items: center;

  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
     margin-bottom: 0;
   }
   
  }
  .el-col {
    border-radius: 4px;
    color: white;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
    height: 100px;
    margin-top: 10px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
